<template>
	<view class="floatWindow">
		<image class="floatWindow-img" mode="aspectFill" :src="goodsDetails.thumb_url"></image>
		<div class='goods-name'>
			<text class='goods_name-txt'>{{goodsDetails.goods_name}}</text>
		</div>
		<div class="floatWindow-bottom">
			<text class="small-txt">券后</text>
			<div class="price-wrap">
				<text class="small-txt">¥</text>
				<text class="goods-price">{{goodsDetails.shop_price}}</text>
			</div>
			<div class="floatWindow-btn">
				<text>抢</text>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			goodsDetails:{
				type:Object,
				default:()=>{{}}
			}
		},
		onLoad(){
			console.log({goodsDetails:this.goodsDetails})
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.floatWindow{
	position: fixed;
	bottom:140rpx;
	right:10rpx;
	z-index: 100;
	width:240rpx;
	/* height: 260rpx; */
	background-color: #fff;
	padding:4rpx;
	border-radius: 10rpx;
	color:#333;
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-size: 24rpx;
	overflow: hidden;
}
	.floatWindow-img{
		width:230rpx;
		height: 240rpx;
		border-radius: 6rpx;
	}
	.goods-name{
		text-overflow: ellipsis;
		lines: 2;
		overflow: hidden;
		white-space: nowrap;
		height: 34rpx;
		padding:6rpx 0;
	}
	.goods-name-txt{
		color:#333;
		
	}
	.floatWindow-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		background-color: #fa3534;
		color:#fff;
		margin-top: 4rpx;
		padding:4rpx 6rpx;
		border-radius: 6rpx;
	}
	.small-txt{
		font-size: 20rpx;
	}
	.price-wrap{
		margin-left:4rpx;
		flex:1;
	}
	.goods-price{
		font-weight: 600;
		font-size: 28rpx;
	}
	.floatWindow-btn{
		justify-self:self-end;
		width:36rpx;
		height: 36rpx;
		border-radius: 200rpx;
		background-color: #ff8200;
		text-align: center;
		font-weight: 600;
	}
</style>
